<template>
  <AppHeader :user="userStore.user" />
  <div class="course-top-white">
    <CourseHeader
      v-if="course"
      :course="course"
    />
    <CourseNav
      v-if="course"
      :course-id="courseId"
    />
  </div>
  <div class="course-bottom-grey">
    <div class="course-content">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { useUserStore } from '@/stores/userStore';
import  AppHeader  from '@/components/main_page/AppHeader.vue'
import axios from "axios";

import CourseNav from "@/components/Course/CourseNav.vue";
import CourseHeader from "@/components/Course/CourseHeader.vue";

import FooterComponent from "@/components/UserCenter/FooterComponent.vue";

const route = useRoute();
const courseId = route.params.id;
const userStore = useUserStore();



// 定义响应式变量存储课程数据
const course = ref(null);

// 页面挂载时获取课程信息
onMounted(async () => {
  try {
    const res = await axios.get(`/api/courses/${courseId}`);
    course.value = res.data;
  } catch (err) {
    
    console.error("获取课程信息失败：", err);
  }
});
</script>


<style scoped>
.course-top-white {
  background: #fff;
  width: 100%;
  /* 不加圆角，直接到底部，分界线直 */
  box-shadow: 0 1px 0 0 #e2e5e8; /* 可选：加一条底部分界线更明显 */
}

.course-bottom-grey {
  background: #f7f9fa;   /* 浅灰色 */
  width: 100%;
  min-height: 80vh;
  padding-top: 0;        /* 分界线直 */
  /* 没有圆角 */
}

.course-content {
  /* 若想让内容和灰色底保持一定间距，可以加padding */
  padding: 32px 24px;
  max-width: 1200px;
  margin: 0 auto;
  background: transparent;  /* 保持内容区和底色一致 */
}
.course-top-white {
  background: #fff;
  width: 100%;
  border-bottom: 1.5px solid #e2e5e8;
}


</style>
